<template>
  <view class="wrap">
    <view class="search">
      <u-search
        v-model="query.postUserName"
        placeholde="请输入问题提出人"
        @custom="search"
        @search="search"
        @clear="clear"
      ></u-search>
    </view>
    <scroll-view
      class="scroll-list msg-list-item"
      scroll-y="true"
      @scrolltolower="lower"
    >
      <u-empty
        text="暂无数据"
        mode="list"
        v-if="businessOrderList.length < 1"
      ></u-empty>
      <view class="list-item" v-for="item in businessOrderList" :key="item.id">
        <view class="msg-time">{{ item.createTime }}</view>
        <u-card
          class="task-list-item"
          :border="false"
          padding="20"
          margin="10rpx 20rpx"
        >
          <view
            slot="head"
            style="
              display: flex;
              align-items: center;
              justify-content: space-between;
            "
          >
            <view style="display: flex; align-items: center; font-size: 30rpx"
              ><image
                class="user-images"
                v-if="item.avatar"
                :src="`${baseUrl}${item.avatar}`"
              ></image
              ><image
                class="user-images"
                v-else
                src="/static/aidex/images/userImg.png"
              ></image
              >{{ item.postUserName }}</view
            ><view style="color: #999999; font-size: 22rpx">{{
              item.createTime
            }}</view>
          </view>
          <view class="" slot="body">
            <u-row gutter="16">
              <u-col span="12">
                <view class="apply-text"
                  ><span>凭证类型：</span>{{ item.voucherTypeId }}</view
                >
              </u-col>
              <u-col span="12">
                <view class="apply-text"
                  ><span>行政区划：</span>{{ item.mofDivName }}</view
                >
              </u-col>
              <u-col span="12">
                <view class="apply-text"
                  ><span>单位名称：</span>{{ item.deptName }}</view
                >
              </u-col>
              <u-col span="12">
                <view class="apply-text"
                  ><span>操作类型：</span>
                  <dict-tag :options="typeList" :value="item.type" />
                </view>
              </u-col>
              <u-col span="12">
                <view class="apply-text"
                  ><span>级别：</span>
                  <dict-tag :options="levelsList" :value="item.levels" />
                </view>
              </u-col>
            </u-row>
          </view>
          <view class="apply-list-foot" slot="foot">
            <u-row gutter="16">
              <u-col span="3" text-align="center">
                <view class="agree-text" @click="viewItem(item)">查看</view>
              </u-col>
            </u-row>
          </view>
        </u-card>
      </view>
      <u-divider v-if="!listHasMore">已经到底了</u-divider>
    </scroll-view>
  </view>
</template>
<script>
import dictTag from '@/components/dict-tag/dict-tag.vue'
export default {
  components: {
    dictTag,
  },
  data() {
    return {
      typeList: [],
      levelsList: [],
      listHasMore: true, //有无下一页数据
      businessOrderList: [], //列表数据
      page: {
        pageNum: 1,
        pageSize: 10,
      },
      query: {
        taskKey: '',
        flowKey: '',
        postUserName: '',
      },
      baseUrl: '',
    }
  },
  onLoad(query) {
    this.baseUrl = this.vuex_config.baseUrl

    this.query.taskKey = query.taskKey ? query.taskKey : ''
    this.query.flowKey = query.flowKey ? query.flowKey : ''
    this.$u.api.getDicts('order_level').then((res) => {
      if (res.code == '200') {
        this.levelsList = res.data.map((item) => {
          return {
            text: item.dictLabel,
            value: item.dictValue,
          }
        })
      }
    })
    this.$u.api.getDicts('order_type').then((res) => {
      if (res.code == '200') {
        this.typeList = res.data.map((item) => {
          return {
            text: item.dictLabel,
            value: item.dictValue,
          }
        })
      }
    })
  },
  onShow() {
    this.getList()
  },
  methods: {
    getList() {
      this.$u.api.listAll({ ...this.page, ...this.query }).then((response) => {
        if (response.code == '200') {
          if (response.rows.length < 10) {
            this.listHasMore = false
          }
          let list = response.rows
          if (this.page.pageNum == 1) {
            this.businessOrderList = []
          }
          let temp = JSON.parse(JSON.stringify(list))
          this.businessOrderList = this.businessOrderList.concat(temp)
          console.log(this.businessOrderList, 'businessOrderList')
        } else {
          this.$u.toast(response.msg)
        }
      })
    },
    lower: function (e) {
      if (!this.listHasMore) {
        return
      }
      this.page.pageNum++
      this.getList()
    },
    search(value) {
      this.query.postUserName = value
      this.getList()
    },
    clear() {
      this.query.postUserName = ''
      this.getList()
    },
    viewItem(row) {
      uni.navigateTo({ url: `/pages/sys/business/details?id=${row.id}` })
    },
  },
}
</script>
<style lang="scss" scoped>
@import '../../../common/uni.css';
page {
  background-color: #f5f5f5;
}
.wrap .search {
  background: #ffffff;
}
.u-dropdown {
  background: #ffffff;
}
.msg-time {
  font-size: 26rpx;
  padding: 2px 0;
  color: #999999;
  text-align: center;
}
.u-card__foot {
  .u-icon {
    margin-right: 10px;
  }
}
.apply-text {
  font-size: 28rpx;
  color: #333333;
  span {
    color: #999999;
  }
}
.user-images {
  width: 28px;
  height: 28px;
  margin-right: 8px;
}
.apply-list-foot {
  font-size: 28rpx;
  justify-content: space-around;
}
.personnel-list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  .personnel-user {
    position: relative;
    margin: 5px 9px 0;
  }
  .user-images {
    width: 32px;
    height: 32px;
    margin-right: 0;
  }
  .iconfont {
    position: absolute;
    top: -12px;
    right: -5px;
    color: #fe0100;
  }
}
.agree-text {
  color: #4094ff;
}
.refuse-text {
  color: #ff4400;
}
.popup-content {
  min-height: 480rpx;
  .title {
    height: 80rpx;
    line-height: 80rpx;
    text-align: center;
  }
  .commentForm {
    padding: 20rpx 40rpx;
  }
  .btns {
    display: flex;
    justify-content: space-around;
    .confirm,
    .cancel {
      width: 160rpx;
      height: 60rpx;
      text-align: center;
      line-height: 60rpx;
      border-radius: 8rpx;
      font-size: 32rpx;
    }

    .confirm {
      color: #ffffff;
      background: #007aff;
    }

    .cancel {
      color: #007aff;
      background-color: #ffffff;
      border: 2rpx solid #007aff;
    }
  }
}
</style>
